<template>
  <div id="u1413">
    <div class="u1413_box1">
      <div class="u1413_box1_left">
        <i class="el-icon-search"></i>
        <span>筛选查询</span>
      </div>
      <div class="u1413_box1_right">查询结果</div>
    </div>
    <div class="u1413_box2">
      <span>报销人：</span>
      <el-input v-model="input" placeholder="请输入内容" class="input-box"></el-input>
      <span>合同名称：</span>
      <el-input placeholder="请输入内容" :disabled="true" class="input-box2"></el-input>
      <span>报销状态：</span>
      <el-select v-model="value" placeholder="请选择" class="input-box">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div id="u1425">
      <div class="u1413_box1">
        <div class="u1413_box1_left">
          <i class="el-icon-s-grid"></i>
          <span>数据列表</span>
        </div>
          <el-button id="addCon" type="text" @click="dialogFormVisible = true">新增</el-button>

          <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="合同编号" :label-width="formLabelWidth">
                <el-input v-model="form.number" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="合同名称" :label-width="formLabelWidth">
                <el-input v-model="form.itemtype" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="合同类型" :label-width="formLabelWidth">
                <el-input v-model="form.itemtype" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生效日期" :label-width="formLabelWidth">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.start" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="失效日期" :label-width="formLabelWidth">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.end" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
            </div>
          </el-dialog>

      </div>
      <el-table height="400" class="table_info" :data="tableData" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="77"></el-table-column>
        <el-table-column type="number" prop="number" label="合同编号" width="171"></el-table-column>
        <el-table-column prop="itemtype" label="合同名称" width="205"></el-table-column>
        <el-table-column prop="itemtype" label="合同类型" width="146"></el-table-column>
        <el-table-column prop="username" label="负责人" width="171"></el-table-column>
        <el-table-column property="start" label="生效日期" width="154"></el-table-column>
        <el-table-column property="end" label="失效日期" width="154"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" type="text" @click="handleSelect(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageSize">
      <el-pagination background layout="prev, pager, next" :total="50" @current-change="onchangeSize"></el-pagination>
    </div>
  </div>
</template>

<script>
import {contractApi} from '../../api/contractApi'

export default {
  data() {

    return {
      options: [{
        value: '选项1',
        label: '已报销'
      }, 
      {
        value: '选项2',
        label: '未报销'
      }, 
      {
        value: '选项3',
        label: '已报销'
      }, 
      {
        value: '选项4',
        label: '已报销'
      }, 
      {
        value: '选项5',
        label: '未报销'
      }],
      value: '',
      input: '',
      tableData:[],
        dialogFormVisible: false,
        form: {
          number: '',
          itemtype: '',
          itemtype: '',
          username: '',
          start: '',
          end: '',
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.tableData.splice(index,1)
      },
      handleSelect(index,row){
        console.log(index,row)
      },
      async loadData(page){
        let ret = await contractApi(page)
        this.tableData = ret
        // console.log(ret)
      },
      onchangeSize(page){
        this.loadData(page)
        // console.log(page)
      },
      add(){
        this.dialogFormVisible = false       
        // this.form.start.toString()
        // console.log(typeof(this.form))
        this.tableData.unshift(this.form)
        this.form={}
      }
    },
    mounted(){
      this.loadData()
    }
}
</script>

<style lang="scss" scope>
  #u1413{
    position: absolute;
    left: 218px;
    top: 100px;
    width: 1366px;
    flex-direction: column;
    display: flex;
    width: 1300px;
    .u1413_box1{
      width: 100%;
      height: 51px;
      background-color: rgba(242, 242, 242, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .u1413_box1_left{
        margin-left: 30px;
        display: flex;
        align-items: center;
        .el-icon-search,.el-icon-s-grid{
          width: 15px;
          height: 15px;
          color: #9B9B9B;
        }
        span{
          display: inline-block;
          width: 62px;
          height: 51px;
          margin-left: 10px;
          font-size: 12px;
          color: #666666;
          line-height: 51px;
        }
      }
      .u1413_box1_right{
        margin-right: 30px;
        width: 73px;
        height: 36px;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        background-color:#ffffff ;
        color: #63B9BE;
        cursor: pointer;
      }
      
      #addCon{
        margin-right: 30px;
        width: 73px;
        height: 36px;
        font-size: 12px;
        text-align: center;
        // line-height: 36px;
        background-color:#ffffff ;
        color: #63B9BE;
        cursor: pointer;
      }
      .el-dialog{
        width: 500px;
        margin: 300px;
      }
    }
    .u1413_box2{
      width: calc(100% - 2px);
      height: 51px;
      background-color: #ffffff;
      border: 1px solid  rgba(228, 228, 228, 1);
      border-top: none;
      display: flex;
      align-items: center;
      span{
        font-size: 12px;
        color: gray;
        margin-left: 30px;
      }
      .input-box{
        width: 141px;
        height: 40px;
      }
      .input-box2{
        width: 141px;
        height: 40px;
      }
    }
    #u1425{
      margin-top: 50px;
      text-align: center;
    }
    .pageSize{
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  }
</style>